Ext.namespace("Nippy.Component");

Nippy.Component.ImagesView = Ext.extend(Ext.Panel, {
	constructor: function(config){
		this._alt = '';
		this._title = '';
		this._Images2Delete=new Array();
		this._view = new Ext.DataView({
				itemSelector: 'div.thumb-wrap',
		        style:'overflow:auto',
		        multiSelect: true,
	            autoHeight:true,
	            overClass:'x-view-over',
	            emptyText: 'Нет изображений для отображения',
		        store: new Ext.data.JsonStore({
		        	root: 'XmlImage',
		        	fields: ['Id','SizeId','Ext','Alt','Title','Width','Height','Order'],
		        	autoLoad: false
		        }),
		        //style="border: 1px solid Red; float: left;"
		        tpl: new Ext.XTemplate(
		            '<tpl for=".">',
		            '<div class="thumb-wrap" id="image_{id}">',
		            '<div class="thumb"><img src="../../pics/gallery/{Id}_{SizeId}_{Width}x{Height}.{Ext}" alt="{Alt}" title="{Title}" class="thumb-img"></div>',
		            '</div>',
		            '</tpl>'
		        )
				,plugins: new Ext.DataView.DragSelector({dragSafe:true})

		});
		Nippy.Component.ImagesView.superclass.constructor.apply(this, arguments);
		this.addEvents('onupload');
	}
	,initComponent: function(){
		Ext.apply(this,{
			autoScroll: true,
			bodyCssClass: 'images-view',
			items:this._view,
            tbar: [	{text: 'Добавить', scope:this, handler: this.uploadClick}
            		,{text: 'Поставить первой', scope:this, handler: this.setFirstClick}
            		,{text: 'Редактировать', scope:this, handler: this.editClick}
            		,'-'
            		,{text: 'Удалить', scope:this, handler: this.deleteClick}
            ]
        });
		Nippy.Component.ImagesView.superclass.initComponent.apply(this, arguments);
	}
	,setAlt: function(v){this._alt = v; return this;}
	,setTitle: function(v){this._title = v; return this;}
	,getView: function() {return this._view;}
	,getImages2Delete: function(){return this._Images2Delete.join(',');}
	,getImages: function(){
		var s = this._view.getStore();
		var recs = s.getRange();
		var ids = '';
		for(var i=0;i<recs.length;i++){
			ids += ids!='' ? ',':'';
			ids +=recs[i].data.Id;
		}
		return ids;
	}
	,uploadClick: function(){
		this.fireEvent('onupload', this);
		if (!this.wnd){
			this.wnd = new Nippy.Components.Dialogs.UploadImage({closable: true,width: 400,modal: true,resizable: false});
			this.wnd.addListener('onuploaded',this.imageUploaded,this);
		}
		this.wnd.show(this._alt,this._title);
	}
	,imageUploaded: function(w,r){
		var s = this._view.getStore();
		var imgs = r.result.images;
		for(var i=0;i<imgs.length;i++){
			if (imgs[i].SizeId == 3 /*THUMB_SIZE_ID*/){
				var rec = new s.recordType(imgs[i]);
				s.add(rec);
				break;
			}
		}
	}
	,deleteClick: function(){
		var recs = this._view.getSelectedRecords();
		for(var i=0;i<recs.length;i++){
			this._Images2Delete.push(recs[i].data.Id);
		}
		this._view.getStore().remove(recs);
	}
	,setFirstClick: function(){
		var indexes = this._view.getSelectedIndexes();
		if (indexes.length>0){
			var i = indexes[0];
			var s = this._view.getStore();
			var r = s.getAt(i);
			s.removeAt(i);
			s.insert(0, new Array(r));
		}
	}
	,editClick: function(){
		var recs = this._view.getSelectedRecords();
		if (recs.length<=0) return;
		var wnd = new Nippy.Components.Dialogs.EditImage({
			closable: true,
			width: 800,
			height: 300,
			modal: true,
        	resizable: true
        });
		wnd.show(recs[0].data.Id);
	}
});